import React, { useState } from 'react';
import { Picker, List, DatePicker } from 'antd-mobile';
import Star from '../star';
import './index.less';

export default function Cascade({
  title,
  data,
  label,
  extra,
  isRequired = true,
  handleOnChange,
  handleOnPickerChange,
  cols,
  field,
  type,
  defaultValue = '',
  mode = 'date',
  disabled = false,
}) {
  const [value, setValue] = useState(defaultValue);
  function handleChange(v) {
    handleOnChange &&
      handleOnChange(
        type !== 'datepicker' ? v.filter(item => item !== '') : v,
        label,
        field && field,
      );
  }
  function handlePickerChange(v) {
    handleOnPickerChange && handleOnPickerChange(v);
  }
  return (
    <div className={value ? 'cascade selected' : 'cascade'}>
      {type !== 'datepicker' ? (
        <Picker
          title={title}
          extra={extra}
          data={data}
          cols={cols}
          value={value}
          onChange={handleChange}
          onPickerChange={handlePickerChange}
          onOk={v => setValue(v)}
          disabled={disabled}
        >
          <List.Item arrow="horizontal">
            <Star show={isRequired} />
            {label}
          </List.Item>
        </Picker>
      ) : (
        <DatePicker
          mode={mode}
          title={title}
          extra={extra}
          value={value}
          onChange={handleChange}
          onPickerChange={handlePickerChange}
          onOk={v => setValue(v)}
          disabled={disabled}
        >
          <List.Item arrow="horizontal">
            <Star show={isRequired} />
            {label}
          </List.Item>
        </DatePicker>
      )}
    </div>
  );
}
